<template>
	<view class="bind-phone-container">
		<view class="header">
			<text class="title">绑定手机</text>
		</view>
		
		<!-- 绑定表单 -->
		<view class="bind-form">
			<view class="form-item">
				<text class="label">手机号码</text>
				<input 
					type="number" 
					v-model="phoneForm.phone" 
					placeholder="请输入手机号码" 
					maxlength="11"
				/>
			</view>
			
			<view class="form-item verify-code">
				<text class="label">验证码</text>
				<input 
					type="number" 
					v-model="phoneForm.verifyCode" 
					placeholder="请输入验证码" 
					maxlength="6"
				/>
				<button 
					class="code-btn" 
					:disabled="counting" 
					@click="getVerifyCode"
				>
					{{counting ? `${countdown}s后重发` : '获取验证码'}}
				</button>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="btn-wrapper">
			<button class="save-btn" @click="submitBind">确认绑定</button>
		</view>
		
		<!-- 提示说明 -->
		<view class="tips-box">
			<text class="tips-title">温馨提示</text>
			<view class="tips-content">
				<text>1. 绑定手机号后，可使用手机号登录</text>
				<text>2. 手机号可用于找回密码和接收通知</text>
				<text>3. 如需更换手机号，请先解绑当前手机号</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth.js';
	import { getUserInfo, setUserInfo } from '@/utils/storage.js';
	
	export default {
		data() {
			return {
				phoneForm: {
					phone: '',
					verifyCode: '',
				},
				// 验证码倒计时
				counting: false,
				countdown: 60,
				timer: null,
				// 当前绑定状态
				bindStatus: {
					isBound: false,
					currentPhone: ''
				}
			}
		},
		onLoad() {
			this.checkBindStatus();
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			// 检查当前手机号绑定状态
			checkBindStatus() {
				const userInfo = getUserInfo();
				if (userInfo && userInfo.phone) {
					this.bindStatus.isBound = true;
					this.bindStatus.currentPhone = userInfo.phone;
					this.phoneForm.phone = this.bindStatus.currentPhone;
					
					// 如果已绑定手机，则页面标题显示修改
					uni.setNavigationBarTitle({
						title: '修改手机号'
					});
				}
			},
			
			// 获取验证码
			getVerifyCode() {
				// 表单验证
				if (!this.phoneForm.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				
				if (!/^1\d{10}$/.test(this.phoneForm.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					});
					return;
				}
				
				// 已经在倒计时中，不重复发送
				if (this.counting) {
					return;
				}
				
				// 调用发送验证码API
				this.sendVerifyCode();
			},
			
			// 调用发送验证码API
			async sendVerifyCode() {
				try {
					uni.showLoading({
						title: '发送中...'
					});
					
					// 实际项目中，这里应该调用API发送验证码
					// const res = await userApi.sendVerifyCode({
					//   phone: this.phoneForm.phone
					// });
					
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1000));
					
					// 模拟成功
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					
					// 开始倒计时
					this.startCountdown();
					
				} catch (e) {
					console.error('发送验证码失败', e);
					
					// 错误处理
					uni.showToast({
						title: e.message || '发送验证码失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			
			// 开始倒计时
			startCountdown() {
				this.counting = true;
				this.countdown = 60;
				
				this.timer = setInterval(() => {
					this.countdown--;
					
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.timer = null;
						this.counting = false;
					}
				}, 1000);
			},
			
			// 提交绑定
			async submitBind() {
				// 表单验证
				if (!this.phoneForm.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				
				if (!/^1\d{10}$/.test(this.phoneForm.phone)) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					});
					return;
				}
				
				if (!this.phoneForm.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				
				if (this.phoneForm.verifyCode.length !== 6) {
					uni.showToast({
						title: '验证码格式不正确',
						icon: 'none'
					});
					return;
				}
				
				// 调用绑定手机API
				this.bindPhone();
			},
			
			// 调用绑定手机API
			async bindPhone() {
				try {
					uni.showLoading({
						title: this.bindStatus.isBound ? '修改中...' : '绑定中...'
					});
					
					// 实际项目中，这里应该调用API绑定手机号
					// const res = await userApi.bindPhone({
					//   phone: this.phoneForm.phone,
					//   verifyCode: this.phoneForm.verifyCode
					// });
					
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1500));
					
					// 模拟成功，更新本地存储的用户信息
					const userInfo = getUserInfo() || {};
					userInfo.phone = this.phoneForm.phone;
					setUserInfo(userInfo);
					
					uni.showToast({
						title: this.bindStatus.isBound ? '手机号修改成功' : '手机号绑定成功',
						icon: 'success'
					});
					
					// 清空表单
					this.phoneForm = {
						phone: '',
						verifyCode: ''
					};
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					
				} catch (e) {
					console.error('绑定手机失败', e);
					
					// 错误处理
					uni.showToast({
						title: e.message || '操作失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss">
.bind-phone-container {
	padding: 20rpx;
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	padding: 20rpx 0;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.bind-form {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.label {
			width: 150rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		input {
			flex: 1;
			height: 60rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		&.verify-code {
			position: relative;
			
			.code-btn {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				background-color: #FF5151;
				color: #fff;
				font-size: 24rpx;
				border-radius: 30rpx;
				
				&[disabled] {
					background-color: #cccccc;
					color: #ffffff;
				}
			}
		}
	}
}

.btn-wrapper {
	margin-top: 60rpx;
	padding: 0 20rpx;
	
	.save-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FF5151;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
}

.tips-box {
	margin-top: 40rpx;
	padding: 30rpx;
	background-color: #FFFBF5;
	border-radius: 15rpx;
	
	.tips-title {
		font-size: 28rpx;
		color: #FF5151;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.tips-content {
		text {
			font-size: 26rpx;
			color: #999;
			line-height: 1.6;
			display: block;
			margin-bottom: 10rpx;
		}
	}
}
</style> 